<template>
    <div class="tips">
        <button class="close" @click="close">×</button>
        <div>
            <div class="area-name">锦溪镇</div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">当月：</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 18px;">{{ this.jin_xi_thisMonth }}</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 14px; ">亿元</p>
            </div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">累计：</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;">{{ this.jin_xi_acc }}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; ">亿元</p>
            </div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">同比：</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;"
                   :style="{color: this.jin_xi_monOnMon>0?
                this.positiveColor:this.negativeColor}">{{ this.jin_xi_monOnMon }}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; "
                   :style="{color: this.jin_xi_monOnMon>0?
                this.positiveColor:this.negativeColor}">%</p>
            </div>
        </div>
        <div>
            <div class="area-name">淀山湖镇</div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">当月：</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 18px;">
                    {{ this.dian_shan_hu_thisMonth }}</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 14px; ">亿元</p>
            </div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">累计：</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;">{{ this.dian_shan_hu_acc }}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; ">亿元</p>
            </div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">同比：</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;"
                   :style="{color: this.dian_shan_hu_monOnMon>0?
                this.positiveColor:this.negativeColor}">{{ this.dian_shan_hu_monOnMon }}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; "
                   :style="{color: this.dian_shan_hu_monOnMon>0?
                this.positiveColor:this.negativeColor}">%</p>
            </div>
        </div>
        <div>
            <div class="area-name">周庄镇</div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">当月：</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 18px;">
                    {{ this.zhou_zhuang_thisMonth }}</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 14px; ">亿元</p>
            </div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">累计：</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;">{{ this.zhou_zhuang_acc }}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; ">亿元</p>
            </div>
            <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">同比：</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;"
                   :style="{color: this.zhou_zhuang_monOnMon>0?
                this.positiveColor:this.negativeColor}">{{ this.zhou_zhuang_monOnMon }}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; "
                   :style="{color: this.zhou_zhuang_monOnMon>0?
                this.positiveColor:this.negativeColor}">%</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "area-tips",
    // props: ['jin_xi', 'dian_shan_hu', 'zhou_zhuang', 'type'],
    props: {
        jin_xi: Object,
        dian_shan_hu: Object,
        zhou_zhuang: Object,
        mode: {
            type: Number,
            required: false,
            default: 0
        }
    },
    data() {
        return {
            negativeColor: "rgb(73,225,140)",
            positiveColor: "rgb(255,181,0)"
        }
    },
    computed: {
        zhou_zhuang_thisMonth() {
            if (this.zhou_zhuang === {}
                || this.zhou_zhuang === null) {
                return "-"
            }
            if (this.mode === 0) {
                return this.zhou_zhuang.thisMonth == null ? "-" : this.zhou_zhuang.thisMonth.toFixed(2)
            } else if (this.mode === 1) {
                return this.zhou_zhuang.currentAchievements == null ? "-" : this.zhou_zhuang.currentAchievements.toFixed(2)
            }
            return "-"
        },
        zhou_zhuang_acc() {
            if (this.zhou_zhuang === {}
                || this.zhou_zhuang === null) {
                return "-"
            }
            if (this.mode === 0) {
                return this.zhou_zhuang.accumulate == null ?
                    "-" : this.zhou_zhuang.accumulate.toFixed(2)
            } else if (this.mode === 1) {
                return this.zhou_zhuang.accumulateAchievements == null ?
                    "-" : this.zhou_zhuang.accumulateAchievements.toFixed(2)
            }
            return "-"
        },
        zhou_zhuang_monOnMon() {
            if (this.zhou_zhuang === {}
                || this.zhou_zhuang === null) {
                return "-"
            }
            if (this.mode === 0) {
                return this.zhou_zhuang.monthOnMonth == null ?
                    "-" : this.zhou_zhuang.monthOnMonth.toFixed(1)
            } else if (this.mode === 1) {
                return this.zhou_zhuang.accumulateIncrease == null ?
                    "-" : this.zhou_zhuang.accumulateIncrease.toFixed(1)
            }
            return "-"
        },
        jin_xi_thisMonth() {
            if (this.jin_xi === {}
                || this.jin_xi === null) {
                return "-"
            } else if (this.mode === 0) {
                return this.jin_xi.thisMonth == null ?
                    "-" : this.jin_xi.thisMonth.toFixed(2)
            } else if (this.mode === 1) {
                return this.jin_xi.currentAchievements == null ?
                    "-" : this.jin_xi.currentAchievements.toFixed(2)
            }
            return "-"
        },
        jin_xi_acc() {
            if (this.jin_xi === {}
                || this.jin_xi === null) {
                return "-"
            }
            if (this.mode === 0) {
                return this.jin_xi.accumulate == null ?
                    "-" : this.jin_xi.accumulate.toFixed(2)
            } else if (this.mode === 1) {
                return this.jin_xi.accumulateAchievements == null ?
                    "-" : this.jin_xi.accumulateAchievements.toFixed(2)
            }
            return "-"
        },
        jin_xi_monOnMon() {
            if (this.jin_xi === {}
                || this.jin_xi === null) {
                return "-"
            }
            if (this.mode === 0) {
                return this.jin_xi.monthOnMonth == null ?
                    "-" : this.jin_xi.monthOnMonth.toFixed(1)
            } else if (this.mode === 1) {
                return this.jin_xi.accumulateIncrease == null ?
                    "-" : this.jin_xi.accumulateIncrease.toFixed(1)
            }
            return "-"
        },
        dian_shan_hu_thisMonth() {
            if (this.dian_shan_hu === {}
                || this.dian_shan_hu === null) {
                return "-"
            }
            if (this.mode === 0) {
                return this.dian_shan_hu.thisMonth == null ?
                    "-" : this.dian_shan_hu.thisMonth.toFixed(2)
            } else if (this.mode === 1) {
                return this.dian_shan_hu.currentAchievements == null ?
                    "-" : this.dian_shan_hu.currentAchievements.toFixed(2)
            }
            return "-"
        },
        dian_shan_hu_acc() {
            if (this.dian_shan_hu === {}
                || this.dian_shan_hu === null) {
                return "-"
            }
            if (this.mode === 0) {
                return this.dian_shan_hu.accumulate == null ?
                    "-" : this.dian_shan_hu.accumulate.toFixed(2)
            } else if (this.mode === 1) {
                return this.dian_shan_hu.accumulateAchievements == null ?
                    "-" : this.dian_shan_hu.accumulateAchievements.toFixed(2)
            }
            return "-"
        },
        dian_shan_hu_monOnMon() {
            if (this.dian_shan_hu === {}
                || this.dian_shan_hu === null) {
                return "-"
            }

            if (this.mode === 0) {
                return this.dian_shan_hu.monthOnMonth == null ?
                    "-" : this.dian_shan_hu.monthOnMonth.toFixed(1)
            } else if (this.mode === 1) {
                return this.dian_shan_hu.accumulateIncrease == null ?
                    "-" : this.dian_shan_hu.accumulateIncrease.toFixed(1)
            }
            return "-"
        },
    },
    methods: {
        close() {
            this.$emit('closeTips')
        }
    }
}
</script>

<style scoped>
.tips {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 25, 74, 0.9);
    padding: 30px;
    border-radius: 5px;
    border: 1px white solid;
    display: flex;
    gap: 30px;
}

.area-name {
    font-size: 20px;
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

.close {
    position: absolute;
    height: 25px;
    width: 25px;
    border: 1px white solid;
    background-color: #2A67BD;
    border-radius: 50%;
    font-size: 23px;
    color: white;
    cursor: pointer;
    right: 10px;
    top: 10px;
}
</style>